import React, { Component, Fragment } from 'react';
import { TableMethods } from '@/common/Hoc/data';
import { Button, Card, Divider, Form, Input, message, Popconfirm, Select, Tag } from 'antd';
import StandardTable from './StandardTable';
import { SimpleCurd } from '@/common/Hoc/SimpleCurdHoc';
import { deleteById, selectPage, updateQuartzState } from '@/services/quartz';
import styles from '@/common/styles/table.less';
import classnames from 'classnames';
import BaseFrom from './form/BaseFrom';

const baseMethods: TableMethods = {
  getList: (param: any) => selectPage(param),
  getDelete: (param: any) => deleteById(param),
};

@SimpleCurd(baseMethods)
// @ts-ignore
@Form.create()
export default class extends Component<any, any> {
  stopQuartz = (record: any) => {
    record.quartzState = 1;
    updateQuartzState(record).then((res: any) => {
      if (res.status === 0) {
        message.success('停止定时器成功');
        this.props.refresh();
      } else {
        message.error(res.msg);
      }
    });
  };

  startQuartz = (record: any) => {
    record.quartzState = 0;
    updateQuartzState(record).then((res: any) => {
      if (res.status === 0) {
        message.success('启动定时器成功');
        this.props.refresh();
      } else {
        message.error(res.msg);
      }
    });
  };
  columns: any[] = [
    {
      title: '任务名',
      dataIndex: 'quartzName',
    },
    {
      title: 'cron表达式',
      dataIndex: 'cron',
    },
    {
      title: '参数',
      dataIndex: 'param',
    },
    {
      title: '定时器描述',
      dataIndex: 'quartzDesc',
    },
    {
      title: '状态',
      dataIndex: 'quartzState',
      render: (state: number) => (
        <span>{state === 0 ? <Tag color="#108ee9">启动</Tag> : <Tag color="#f50">暂停</Tag>}</span>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createdTime',
    },
    {
      title: '操作',
      render: (text: any, record: any) => (
        <Fragment>
          {record.quartzState === 0 ? (
            <a onClick={() => this.stopQuartz(record)}>暂停</a>
          ) : (
            <a onClick={() => this.startQuartz(record)}>启动</a>
          )}
          <Divider type="vertical" />
          <a onClick={() => this.props.handleModalVisible(true, record)}>编辑</a>
          <Divider type="vertical" />
          <Popconfirm
            placement="bottom"
            title="确定删除吗?"
            onConfirm={() => {
              this.props.handleDelete(record.id);
            }}
            okText="确定"
            cancelText="取消"
          >
            <a href="">删除</a>
          </Popconfirm>
        </Fragment>
      ),
    },
  ];
  searchColumns = [
    {
      title: '任务名',
      name: 'quartzName',
      content: <Input placeholder="请输入任务名" />,
    },
    {
      title: '状态',
      name: 'quartzState',
      content: (
        <Select>
          <Select.Option value="0">启动</Select.Option>
          <Select.Option value="1">暂停</Select.Option>
        </Select>
      ),
    },
  ];

  render() {
    const {
      tableChange,
      tableData,
      tableLoading,
      pageTotal,
      modalVisible,
      currentData,
      handleModalVisible,
    } = this.props;
    return (
      <div className="s_r_table_wrapper">
        <Card bordered={false}>
          <div className={classnames(styles.tableList)}>
            <div className={styles.tableListForm}>
              {this.props.renderForm(this.props.form, this.searchColumns)}
            </div>
            <div className={styles.tableListOperator}>
              <Button icon="plus" type="primary" onClick={() => handleModalVisible(true)}>
                新建
              </Button>
            </div>
            <StandardTable
              tableData={tableData}
              pageTotal={pageTotal}
              tableChange={tableChange}
              columns={this.columns}
              loading={tableLoading}
            />
          </div>
        </Card>

        <BaseFrom
          handleModalVisible={handleModalVisible}
          modalVisible={modalVisible}
          currentData={currentData}
        />
      </div>
    );
  }
}
